<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播客设计</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
    <script src="jquery.min.js"></script>
    <script src="index.js"></script>
    <script src="animate.js"></script>
 
    <style>
       .lunbotu li {
            list-style: none;
            float: left;
        }
        .lunbotu {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
            z-index: -1;
        }
        .circle li {
            float: left;
        }
        
        .box {
            position: relative;
            width: 1450px;
            height: 400px;
            /* background-color: pink; */
            margin: auto;
            overflow: hidden;
        }
        /* 按钮 */
        .btn1,.btn2 {
            display: none;
            width: 30px;
            height: 30px;
            background-color: #fff;
            opacity: .5;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            cursor: pointer;
        }
        .btn1 {
            position: absolute;
            left: 0;
            top: 50%;
        }
        .btn2 {
            position: absolute;
            right: 0;
            top: 50%;
        }
        /* 小圆点 */
        .circle {
            position: absolute;
            bottom: 0px;
            left: 620px;
            height: 30px;
        }
        .circle li {
            width: 15px;
            height: 15px;
            border: 2px solid #fff;
            border-radius: 50%;
            margin: 0 10px;
            cursor: pointer;
        }
        .current {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header class="head w">
        <div class="img">
            <img src="images/logo.jpg" alt="">
            <img src="images/pic01.gif" alt="">
            <div class="head-content">
                <div class="strat" style="position: absolute; top: 3px;right: 64px; width: 30px;height: 30px;background:url(images/icon_bg.jpg) 0px -19px;"></div>
                <a href="#">我的收藏</a>
                <div class="slide1">
                    <ul>
                        <li>我的收藏</li>
                        <li>我的收藏</li>
                        <li>我的收藏</li>
                    </ul>
                </div>
            </div>
            <div class="head-content1">
                <div class="tel" style="position: absolute; top: 4px;right: 76px; width: 30px;height: 30px;background:url(images/icon_bg.jpg) -51px -79px;"></div>
                <a href="#">联系方式</a>
            </div>
        </div>
        <div class="clear"></div>
    </header>
    
    <!-- 内容模块 -->
    <div class="body">
        <!-- 导航栏模块 -->
        <div class="nav">
            <div class="w nav-ul">
                <ul >
                    <li>首页</li>
                    <li>课程介绍</li>
                    <li>教程下载</li>
                    <li>师资力量</li>
                    <li>就业信息</li>
                    <li>学员作品</li>
                    <li>校园生活</li>
                    <li>报名流程</li>
                    <li>常见问题</li>
                    <li>来校路线</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 轮播图模块 -->

    <div class="box">
        <!-- 按钮 -->
        <span class="btn1"><</span>
        <span class="btn2">></span>
        <!-- 图片 -->
        <ul class="lunbotu">
            <li><a href="#"><img src="images/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""></a></li>
            
            
        </ul>
        <!-- 小圆点 -->
        <ol class="circle">
           
        </ol>
    </div>

    <!-- 通告栏 -->
    <div class="message w">
        <div class="message_head">通知公告</div>
        <div class="message_content">
              <marquee behavior="" direction="">
                  <span><img src="images/icon6.gif" style="width: 8px;height: 8px;">【广州喜讯】报名网页平面UI就业班喜送基础班！&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <span><img src="images/icon6.gif" style="width: 8px;height: 8px;">&nbsp;史上最难就业年，怎么办？到播客免费学PS把！</span>
              </marquee>
        </div>
    </div>


    <!-- 主体部分 -->
    <div class="main_content w">
        <!-- 左 -->
        <div class="main_content_left">
            <!-- 示范专业简述模块 -->
        <div class="main_content1">
            <img src="images/left.png" alt="" class="main_content1_img1">
            <div class="main_content1_img2"></div>
            <img src="images/icon8.gif" alt="" class="main_content1_img3">
            <div class="main_content1_head">示范专业简述模块</div>
            <div class="main_content1_body">
                <ul>
                    <li> <div class="li-img"></div>人才培养</li>
                    <li><div class="li-img"></div>教学改革</li>
                    <li><div class="li-img"></div>师资团队</li>
                    <li><div class="li-img"></div>示范效应</li>
                </ul>
                <ul>
                    <li> <div class="li-img"></div>人才培养</li>
                    <li><div class="li-img"></div>教学改革</li>
                    <li><div class="li-img"></div>师资团队</li>
                    <li><div class="li-img"></div>示范效应</li>
                </ul>

            </div>

        </div>
        <!-- 专业动态模块 -->
        <div class="main_content2">
            <div class="main_content2_head">
                <img src="images/left_message.png" alt="" class="main_content2_head_img1">
                <div class="main_content2_head_img2">专业动态</div>
                <span class="title_text">行业动态</span>
                <div class="more" style="display: inline-block;">more&nbsp;></div>

            </div>
            <div class="main_content2_body">
                <img src="images/pic1.jpg" alt="">
                <div class="main_content2_body_text">
                    <ol>
                        <li><div class="content2_li"></div> 网页平面实际学院七期班香山游 <div class="content_time">2013/06</div></li>
                        <li><div class="content2_li"></div> 播客平面六期久违的体育课 <div class="content_time">2013/06</div></li>
                        <li><div class="content2_li"></div>网页平面设计学院四期班奥林匹克公园一日游<div class="content_time">2013/06</div></li>
                        <li><div class="content2_li"></div> 网页平面设计学院三期798艺术区一日游 <div class="content_time">2013/06</div></li>
                        <li><div class="content2_li"></div> 网页平面设计学院二期自助烧烤 <div class="content_time">2013/06</div></li>
                    </ol>
                </div>
            </div>
        </div>
         <!-- 招聘信息模块 -->
         <div class="main_content3">
             <div class="main_content3_head">
                 <div class="main_content3_head_img"></div>
                 <h4>招聘信息</h4>
             </div>
             <div class="main_content3_body">
                 <ul>
                     <li> <div class="main_content3_body_img"></div> 深圳石和信息科技招聘UI设计</li>
                     <li> <div class="main_content3_body_img"></div> 兰州为网络科技招聘前端工程师</li>
                     <li> <div class="main_content3_body_img"></div> 南京互动网络公司招聘前端工程师</li>
                     <li> <div class="main_content3_body_img"></div> 北京兰彩虹科技招聘UI设计实习生</li>
                     <li> <div class="main_content3_body_img"></div> 上海网络科技招聘JS前端工程师</li>
                 </ul>
             </div>
         </div>
         <!-- 师资力量模块 -->
         <div class="main_content4">
             <div class="main_content4_head">
                 <div class="main_content4_head_img"></div>
                 <h4>师资力量</h4>
                 <div class="more">more&nbsp;></div>
             </div>
             <div class="main_content4_body">
                 <div class="main_content4_box">
                     <img src="images/teacher01.gif" alt="">
                     <p>网页主讲张老师</p>
                     
                 </div>
                 <div class="main_content4_box">
                    <img src="images/teacher02.gif" alt="">
                    <p>网页主讲刘老师</p>
                    
                </div>
                <div class="main_content4_box">
                    <img src="images/teacher03.gif" alt="">
                    <p>网页主讲韩老师</p>
                    
                </div>
                <div class="main_content4_box">
                    <img src="images/teacher04.gif" alt="">
                    <p>网页主讲邵老师</p>
                    
                </div>
             </div>
         </div>

        </div>
        <!-- 右 -->
        <div class="main_content_right">
            <div class="main_content_right_up">
                <div class="main_content_right_up_head">
                    <h3>精品课程</h3> <span>Courses</span>

                    <ul>
                        <li><div class="color" style="background-color:#0080db ;"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Photoshop图像处理<div class="course_img" style="width: 35px;height: 30px;background:url(images/icon_bg.jpg) -25px -29px;position: absolute;top: 10px; right: 16px;"></div></li>

                        <li><div class="color" style="background-color: #61a301;"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网页平面设计<div class="course_img" style="width: 35px;height: 30px;background:url(images/icon_bg.jpg) 185px -569px;position: absolute;top: 10px; right: 16px;"></div></li>

                        <li><div class="color"style="background-color: #f50149;"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UI设计<div class="course_img" style="width: 35px;height: 30px;background:url(images/icon_bg.jpg) 185px -508px;position: absolute;top: 10px; right: 16px;"></div></li>

                        <li><div class="color"style="background-color:#995f91;"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML+CSS网页制作<div class="course_img" style="width: 35px;height: 30px;background:url(images/icon_bg.jpg) -25px 0px;position: absolute;top: 10px; right: 16px;"></div></li>

                        <li><div class="color"style="background-color: #ffb409;"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JavaScript制作网页特效<div class="course_img" style="width: 35px;height: 30px;background:url(images/icon_bg.jpg) 185px -541px;position: absolute;top: 10px; right: 16px;"></div></li>
                        
                    </ul>
                </div>
            </div>
            
            <img src="images/study.jpg" alt="" class="main_content_right_down">
        </div>
        <div class="clear" style="clear: both;"></div>

    </div>
    <!-- 下 -->
    <div class="main_body_down w">
        <!-- 数据统计模块 -->
        <div class="main_content5">
            <div class="main_content5_head_img1"></div>
            <div class="main_content5_head">
                <h4>数据统计</h4>
            </div>
            <div class="main_content5_content">
                <img src="images/pic02.gif" alt="" class="main_content5_content_img1">
                <img src="images/pic03.gif" alt="" class="main_content5_content_img2">
                <img src="images/pic022.gif" alt="" class="main_content5_content_img3">
                <img src="images/pic033.gif" alt="" class="main_content5_content_img4">
            </div>
        </div>
        <!-- 原创图书模块 -->
        <div class="main_content6" >
            <div class="main_content6_head_img1"></div>
            <div class="main_content6_head">
                 <h4>原创图书</h4>
            </div>
            <div class="main_content6_body">
                <div class="main_content6_content">
                    <img src="images/book01.gif" alt="">
                    <p>网页设计与制作（HTML+CSS）</p>
                </div>
                <div class="main_content6_content1">
                    <img src="images/book02.gif" alt="">
                    <p>Photoshop&nbsp; CS6图像设计案例教程</p>
                </div>
                <div class="main_content6_content2">
                    <img src="images/book03.gif" alt="">
                    <p>Java基础入门</p>
                </div>
                <div class="main_content6_content3">
                    <img src="images/book04.gif" alt="">
                    <p>C语言开发入门教程</p>
                </div>
                <div class="main_content6_content4">
                    <img src="images/book05.gif" alt="">
                    <p>Object-C入门教程</p>
                </div>
            </div>
            
        </div>
        <div class="clear" style="clear: both;"></div>
    </div>


    <!-- 底部 -->
    <div class="footer">
        <div class="footer_content w">
            <img src="images/top_btn.gif" alt="" style="position: absolute;top: 0 ;left: 382px;">
            <div class="row1">
                <span>友情链接</span>
                <img src="images/link.jpg" alt="">
                <img src="images/link.jpg" alt="">
                <img src="images/link.jpg" alt="">
                <img src="images/link.jpg" alt="">
            </div>
            <div class="row2">
                <p>播客-专业Java培训、net培训、php培训、iOS培训、C++培训、网页设计、平面设计培训机构</p>
                <p>版权所有: &nbsp;&nbsp; 2006 - 2020 播客教育科技有限公司</p>
                <p>电话：010-0909090909/60/70 传真: 0101-09090909 邮箱: zhanghj+boke.cn</p>
                <p>京ICP备080909090号 京工网安备11090909090</p>
            </div>
        </div>
    </div>


</body>
</html>